import React from 'react';
import delImg from '../../static/img/delete.png'
import checkImg from '../../static/img/check.png'
class TodoItem extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showDel: false  // 控制删除 icon 的显示隐藏
        }
    }

    handleDelete () {
        // 获取父组件传递过来的 date
        const _id = this.props.id;
        // 执行父组件的 delete 方法
        this.props.onDeleteItem(_id);
    }

    handleCheck (){
        const _id = this.props.id;
        this.props.onCheckItem(_id);
    }

    render() {
        return (
            <div className="todoItem">
                <p className={this.props.done ? 'check':' '}>
                    <span className="itemCont">{ this.props.content }</span>
                    <span className="itemTime">{ this.props.date }</span>
                    <button className="delBtn" onClick={this.handleDelete.bind(this)}>
                        <img className="delIcon" alt="删除" src={delImg} title="删除" />
                    </button>
                    {this.props.done ? '' : (<button className="checkBtn" onClick={this.handleCheck.bind(this)}>
                        <img className="checkIcon" alt="完成" src={checkImg} title="完成" />
                    </button>)}
                </p>
            </div>
        )
    }
}

export default TodoItem;